import React, { memo, useState  } from 'react'
// import { useDispatch, useSelector, shallowEqual } from 'react-redux';

import { NavLink } from 'react-router-dom';
import { SearchOutlined } from '@ant-design/icons'

import { 
  getQRKey,
  getQR,
  getQRState
} from '@/services/appHeader'


import {
  HeaderWrapper,
  HeaderLeft,
  HeaderRight
} from './style.js'

import { } from '@ant-design/icons'
import { Input, Modal } from 'antd';


import { headerLinks } from '@/common/local-data.js'


export default memo(function () {

  

  const [isModalVisible, setIsModalVisible] = useState(false);

  // 显示模态框
  const showModal = () => {
    setIsModalVisible(true);
    getQRKey().then((res) => {
      console.log("res",res);
    })
  };

  const handleOk = () => {
    setIsModalVisible(false);
  };

  const handleCancel = () => {
    setIsModalVisible(false);
  };

  const showSelectItem = (item, index) => {
      if (index < 3) {
        return (
          <NavLink to={item.link}>
            {item.title}
            <i className="sprite_01 icon"></i>
          </NavLink>
        )
      } else {
        return (
          <a href={item.link}>{item.title}</a>
        )
      }
    }

  // 返回的jsx
  return (
    <HeaderWrapper>
      <div className="content wrap-v1">
        <HeaderLeft>
          <a href="#/" className="logo sprite_01"></a>
          <div className="select-list">
            {
              headerLinks.map((item, index) => {
                return (
                  <div key={item.key} className="select-item">
                    {showSelectItem(item, index)}
                  </div>
                )
              })
            }
          </div>
        </HeaderLeft>
        <HeaderRight>
          <Input className="search" placeholder="音乐/视频/电台/用户" prefix={<SearchOutlined />} />
          <div className="center">创作者中心</div>
          <div onClick={showModal}>登录</div>
          <Modal title="请扫描微信二维码完成登录" visible={isModalVisible} onOk={handleOk} onCancel={handleCancel}>
            <p>Some contents...</p>
            <p>Some contents...</p>
            <p>Some contents...</p>
          </Modal>
        </HeaderRight>
      </div>
      <div className="divider"></div>
    </HeaderWrapper>
  )
})
